<template>
	<view class="bgf">
		<view class="box">
			<view class="menu_content_box">
				<view class="re">
					<!--轮播图-->
					<swiper class="swiper_focus" :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" :indicator-color="indicatorColor"
						:indicator-active-color="indicatorActiveColor" :circular="circular" @change="onswiperChange">
						<swiper-item v-for="(item ,index) in detail.headImgList" :key="index">
							<image :lazy-load="true" :src="item" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<!--轮播图-->
					<view class="swiper_serial_number">{{index}}/{{detail.headImgList.length}}</view>
					<!-- 返回-按钮 -->
					<view class="back_btn_pos" @tap="back">
						<image :lazy-load="true" src="/static/icon_arrow_3.png" class="img9" @tap="back"></image>
					</view>
				</view>

				<view class="pt30 pb30 pl30 pr30 bgf">
					<view class="fwb cor_F23"><text class="fs30">￥</text><text class="fs42">{{detail.price}}万</text>
					</view>
					<view class="mt25 fs32 fwb cor_000">{{detail.name}}</view>
				</view>

				<view class="mt15 area_block_1 pt10 pb30">
					<view class="df fw fldr">
						<view class="mt30 wp33 tac" v-for="item,index in detail.infoList" :key="index">
							<view class="re">
								<image :lazy-load="true" :src="item.icon" class="img10 vt"></image>
							</view>
							<view class="mt15 fs24 fwb cor_000">{{item.key}}</view>
							<view class="mt20 fs22 fwb cor_999">{{item.value}}</view>
						</view>
					</view>

				</view>

				<!-- 咨询车况 -->
				<view class="mt15 area_block_1 pt25 pb25 pl15" v-if="detail.managerInfo">
					<view class="flex_box aic">
						<view class="re mr15">
							<image :lazy-load="true" :src="detail.managerInfo.icon" class="img12" mode="aspectFill">
							</image>
						</view>
						<view class="item" >
							<view class="fs32 fwb cor_000">{{detail.managerInfo.name}}</view>
							<view class="mt20 fs24 cor_333">专业管家，买车卖车省心省力</view>
							<view class="mt15 df aic fs24 cor_333">
								<image :lazy-load="true" src="/static/icon_fire.png" class="img7"></image>
								<view class="ml5">累计成交{{detail.managerInfo.turnover}}台</view>
								<!-- <view class="ml5">累计成交30台，近30天带看23次</view> -->
							</view>
						</view>
						<view class="ml15 look_or_service_btn" @tap="call">咨询车况</view>
					</view>
					<view class="mt35 df aic jcc">
						<image :lazy-load="true" src="/static/icon_security.png" class="img11"></image>
						<view class="ml10 fs24 cor_000">管家已去现场与设备合影，改设备真实存在，真实在售</view>
					</view>
				</view><!-- 咨询车况 -->

				<!-- 车况报告 -->
				<view class="mt15 area_block_1 pt35 pb35 pl25" v-if="detail.reportId">
					<view class="flex_box aic">
						<view class="item">
							<view class="fs32 fwb cor_000">车况报告</view>
							<view class="mt30 fs24 cor_333">编号：{{detail.reportId}}</view>
							<view class="mt10 fs24 lh32 cor_333">车况简介：{{detail.introduce}}</view>
						</view>
						<view class="ml15 look_or_service_btn" @tap="readReport">详细查看</view>
					</view>
				</view><!-- 车况报告 -->

				<!-- 购买流程 -->
				<view class="mt15 area_block_1 pt35 pb50 pl25 pr25">
					<view class="fs32 fwb cor_000">购买流程</view>
					<view class="mt50 pt5 re">
						<image :lazy-load="true" src="/static/icon_step.png" class="wp100" mode="widthFix"></image>
					</view>
				</view><!-- 购买流程 -->

				<!-- 商品详情 -->
				<view class="mt45">
					<view class="df aic jcc">
						<view class="line_hor_sty"></view>
						<view class="ml25 mr25 fs32 fwb cor_000">商品详情</view>
						<view class="line_hor_sty"></view>
					</view>
					<view class="mt35 pa20 bgf">
						<view class="re" v-for="item, index in detail.imgList" :key="index">
							<image :lazy-load="true" :src="item.imgUrl" class="wp100" mode="widthFix"></image>
							<text
								style="display: block;width: 100%;text-align: center;font-size: 40rpx;">{{item.content}}</text>
						</view>
					</view>
				</view><!-- 商品详情 -->

			</view>

			<!-- 立刻咨询-按钮 -->
			<view class="consult_immediately_btn" @tap="call">立刻咨询</view>

		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		diggerDetailApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				detail: {
					imgList: [],

					headImgList: [
						'/static/banner_2.png',
						'/static/banner_2.png',
						'/static/banner_2.png'
					],



				},
				id: 0,
				index: 1, //轮播当前序号
				autoplay: true,
				interval: 3000,
				duration: 300,
				indicatorDots: false,
				circular: true,
				indicatorColor: '#fff',
				indicatorActiveColor: '#0692ff',
				autoplayNews: true,
				intervalNews: 3000,
				durationNews: 300,
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			this.diggerDetail();
		},
		
		onBackPress(options) {
		    uni.redirectTo({
		    	url: '/pages/index/index'
		    })
		},

		methods: {
			onswiperChange: function(e) {
				this.index = e.detail.current + 1
			},

			back() {
				uni.navigateBack({
					delta: 0
				})
			},

			readReport() {
				uni.navigateTo({
					url: '/pages/car_report/car_report_read?id=' + this.detail.reportId
				})
			},

			diggerDetail() {
				let that = this;
				showLoading();
				diggerDetailApi({
					id: this.id
				}).then(res => {
					that.detail = res.data;
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},
			call() {
				let tel = '';
				if (this.detail.managerInfo && this.detail.managerInfo.phone) {
					tel = this.detail.managerInfo.phone;
				} else {
					tel = thi.detail.phone;
				}
				uni.makePhoneCall({
					phoneNumber: tel
				});
			}

		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 163rpx);
		background-color: #f6f6f6;
		margin-top: 65rpx;
	}

	.swiper_focus {
		width: 100%;
		height: 690rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.swiper_focus image {
		height: 100%;
		width: 100%;
	}

	.swiper_serial_number {
		position: absolute;
		bottom: 23rpx;
		right: 30rpx;
		width: 90rpx;
		height: 46rpx;
		line-height: 46rpx;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		background: rgba(0, 0, 0, .23);
		border-radius: 23rpx;
		z-index: 2;
	}

	.back_btn_pos {
		position: absolute;
		top: 41rpx;
		left: 29rpx;
		width: 64rpx;
		height: 64rpx;
		z-index: 3;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
	}

	.look_or_service_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 108rpx;
		height: 48rpx;
		font-size: 22rpx;
		color: #fff;
		background-image: linear-gradient(to right, #f44f33, #e7170b);
		border-radius: 24rpx 0 0 24rpx;
	}

	.line_hor_sty {
		width: 174rpx;
		height: 1px;
		background-color: #b6b6b6;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}
</style>
